<template>
  <div class="home">
    <ToolBar />
    <main>
      <!--左侧组件列表-->
      <section class="left">
        <ComponentList />
        <RealTimeComponentList/>
      </section>
      <!--中间画布-->
      <section class="center">
        <div
          class="content"
          @drop="handleDrop"
          @dragover="handleDragOver"
          @mousedown="handleMouseDown"
          @mouseup="deselectCurComponent"
        >
          <Editor />
        </div>
      </section>
      <!--右侧属性列表-->
      <section class="right">
        <el-tabs v-if="curComponent" v-model="activeName">
          <el-tab-pane label="属性" name="attr">
            <component :is="curComponent.component + 'Attr'" />
          </el-tab-pane>
          <el-tab-pane label="动画" name="animation" style="padding-top: 20px;">
            <AnimationList />
          </el-tab-pane>
          <el-tab-pane label="事件" name="events" style="padding-top: 20px;">
            <EventList />
          </el-tab-pane>
        </el-tabs>
      </section>
    </main>
  </div>
</template>

<script lang="ts" setup>
import ToolBar from "@/components/common/ToolBar.vue";
import Editor from "@/components/Editor/index.vue";
import RealTimeComponentList from "@/components/common/RealTimeComponentList.vue";
import AnimationList from "@/components/common/AnimationList"
import EventList from "@/components/common/EventList.vue"
import ComponentList from "@/components/common/ComponentList.vue";
import { useGlobalStore } from "@/store";
import { ref } from "vue";

const globalStore = useGlobalStore()
const curComponent = globalStore.curComponent
const activeName = ref<string>("attr")

const handleDrop = (e: Event) => {
  e.preventDefault();
  e.stopPropagation();
};
const handleDragOver = (e: Event) => {
  // console.log("e", e);
  console.log("handleDragOver");
};
const handleMouseDown = (e: Event) => {
  // console.log("e", e);
  console.log("handleMouseDown");
};
const deselectCurComponent = (e: Event) => {
  // console.log("e", e);
  console.log("deselectCurComponent");
};
</script>
<style lang="scss">
$tool-height: 64px;
.home {
  height: 100vh;
  background: #fff;

  main {
    height: calc(100% - 64px);
    position: relative;

    .left {
      position: absolute;
      height: 100%;
      width: 200px;
      left: 0;
      top: 0;

      & > div {
        overflow: auto;

        &:first-child {
          border-bottom: 1px solid #ddd;
        }
      }
    }

    .right {
      position: absolute;
      height: 100%;
      width: 288px;
      right: 0;
      top: 0;
    }

    .center {
      margin-left: 200px;
      margin-right: 288px;
      background: #f5f5f5;
      height: 100%;
      overflow: auto;
      padding: 20px;

      .content {
        width: 100%;
        height: 100%;
        overflow: auto;
      }
    }
  }
}
</style>
